<template>
  <div class="controlSong">
    <i class="iconfont icon-xunhuan"></i>
    <i
      class="iconfont icon-shangyishou"
      @click="previousSong"
    ></i>
    <i
      v-if="isPlayStatus === true"
      class="iconfont icon-zanting"
      @click="pauseSong"
    >
    </i>
    <i
      v-else
      class="iconfont icon-bofang"
      @click="playSong"
    >
    </i>
    <i
      class="iconfont
      icon-xiayishou"
      @click="next"
    ></i>
    <i class="iconfont icon-bofangliebiao"></i>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Toast } from 'vant'

export default {
  name: 'controlSong',
  components: {
    [Toast.name]: Toast
  },
  props: {},
  data () {
    return {}
  },
  computed: {
    ...mapState(['audio', 'isPlayStatus', 'playingSongList', 'playedSongIndex', 'loginData'])
  },
  watch: {},
  created () {},
  mounted () {},
  methods: {
    // 暂停播放歌曲
    pauseSong () {
      this.audio.pause()
      this.$store.commit('setPlayStatus', false)
    },
    // 播放歌曲
    playSong () {
      // 没有正在播放的歌曲则根据 songIndex 重新播放
      if (!this.audio.currentSrc) {
        this.$emit('storagePlayingSongList')
        this.$store.commit('setPlayedSongIndex', 0)
      }
      if (this.audio.currentSrc) {
        this.audio.play()
        this.$store.commit('setPlayStatus', true)
      } else if (!this.playingSongList) {
        Toast('无播放列表')
      }
    },
    // 播放下一首歌曲
    async next () {
      let songIndex = this.playedSongIndex
      this.$store.commit('setPlayedSongIndex', songIndex += 1)
      // 判断待播放歌曲列表内是否有歌曲
      if (this.playingSongList.length === 0) {
        return Toast('没有正在播放的歌曲')
      }
      // 后续没有歌曲列表，从第一首开始播放
      if (this.playedSongIndex === this.playingSongList.length) {
        this.$store.commit('setPlayedSongIndex', 0)
      }
    },
    // 播放上一首歌曲
    previousSong () {
      let songIndex = this.playedSongIndex
      this.$store.commit('setPlayedSongIndex', songIndex -= 1)
      // 判断待播放歌曲列表内是否有歌曲
      if (this.playingSongList.length === 0) {
        return Toast('没有正在播放的歌曲')
      }
      // 后续没有歌曲列表，从最后一首开始播放
      if (this.playedSongIndex <= -1) {
        this.$store.commit('setPlayedSongIndex', this.playingSongList.length - 1)
      }
    }
  }
}
</script>
<style lang='less' scoped>
.controlSong {
  height: 260px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 15px;
  .iconfont {
    padding: 10px;
    font-size: 30px;
    color: #4b4b4b;
  }
  .icon-bofang, .icon-zanting{
    font-size: 40px;
  }
}
</style>
